<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili 哔哩哔哩干杯~</title>
</head>

<body>
    <div class="main">
        <img src="image/head.png" alt="" onclick="new function(){alert('尚未开发')}">
        <img src="image/登录/head.png" alt="" class="headimg">
        <div class="headup"></div>
        <div class="mid">
            <div class="line0"></div>
            <div class="line1"></div>
            <div class="mtext">注册</div>
            <div class="input i1 ir1">
                <input type="text" class="in reg1" placeholder="昵称" value="ayi">
            </div>
            <div class="input i2 ir2">
                <input type="password" class="in reg2" placeholder="密码（6~16个字符组成，区分大小写）" value="123123">
            </div>
            <img src="image/注册/img.png" alt="" class="img" onclick="new function(){alert('尚未开发')}">
            <button class="rebt" onclick="reg();">注册</button>
            <img src="image/注册/tolo.png" alt="" class="tolo" onclick="new function(){window.open('login.html');}">
            <img src="image/注册/null0.png" alt="" class="n0">
            <img src="image/注册/null1.png" alt="" class="n1">
            <img src="image/注册/null2-1.png" alt="" class="n2-1">
            <img src="image/注册/null2-2.png" alt="" class="n2-2">
        </div>
        <img src="image/foot.png" alt="" class="footimg" onclick="new function(){alert('尚未开发')}">
        <div class="successDiv">
            <i class="fa fa-check-circle fa-1x" aria-hidden="true"></i>
            &nbsp;注册成功！开启您的B站之旅吧~
        </div>
        <div class="back" onclick="back0();"></div>
    </div>
</body>

</html>

<script src="js.js"></script>

<style>
    .back {
        position: absolute;
        /* border: 1px red solid; */
        cursor: pointer;
        height: 30px;
        width: 117px;
        top: 20px;
        left: 30px;
    }

    .successDiv {
        position: fixed;
        top: -50px;
        left: 750px;
        height: 40px;
        width: 400px;
        border-radius: 5px;
        background-color: #f0f9eb;
        color: #67c23a;
        text-align: center;
        line-height: 40px;
        border: #90c57662 solid 1px;
        transition: top 0.4s;
    }

    .n1 {
        position: absolute;
        right: 140px;
        top: 150px;
        opacity: 0;
    }

    .n0 {
        position: absolute;
        right: 180px;
        top: 150px;
        opacity: 0;
    }

    .n2-1 {
        position: absolute;
        right: 138px;
        top: 230px;
        opacity: 0;
    }

    .n2-2 {
        position: absolute;
        right: 129px;
        top: 230px;
        opacity: 0;
    }


    .tolo {
        position: absolute;
        top: 500px;
        right: 270px;
        cursor: pointer;
    }

    .img {
        position: absolute;
        top: 295px;
        left: 268px;
    }

    .rebt {
        position: absolute;
        color: #ffffff;
        top: 455px;
        left: 281px;
        width: 420px;
        height: 35px;
        cursor: pointer;
        background-color: #00a7de;
        border-radius: 5px;
        border: none;
        transition: background-color 0.5s;

    }

    .rebt:hover {
        background-color: #00bdde;
    }

    .input {
        position: absolute;
        height: 38px;
        width: 418px;
        left: 281px;
        border-radius: 5px;
        border: solid 1px #dcdfe6;
        overflow: hidden;
        /* #f66495 */
    }

    .i1 {
        top: 140px;
    }

    .i2 {
        top: 220px;
    }

    .in {
        position: absolute;
        height: 38px;
        width: 390px;
        top: 0;
        left: 10px;
        border-style: none;
        outline-style: none;
        color: rgb(126, 126, 126);
    }

    .line0 {
        width: 430px;
        border-top: #ddd solid 1px;
        border-bottom: none;
        position: absolute;
        left: 0;
        top: 45px;
    }

    .line1 {
        width: 430px;
        border-top: #ddd solid 1px;
        border-bottom: none;
        position: absolute;
        right: 0;
        top: 45px;
    }

    .mtext {
        font-size: 38px;
        /* font-weight: bolder; */
        text-align: center;
        height: 30px;
        line-height: 30px;
        position: absolute;
        top: 30px;
        left: 450px;
    }


    .main {
        width: 1900px;
    }

    .headimg {
        position: absolute;
        top: 70px;
        left: 470px;
    }

    .footimg {
        position: relative;
        bottom: -200px;
    }

    .headup {
        position: absolute;
        top: 70px;
        height: 86px;
        width: 1900px;
        background-color: #00a0d8;
        z-index: -1;
    }

    .mid {
        position: relative;
        top: 90px;
        left: 460px;
        width: 978px;
        height: 500px;
        /* border: red solid 1px; */
    }
</style>